<template>
	<view class="container" :style="{backgroundImage: 'url('+ $util.img('image/erqi/poster_bg.png') +')'}">
		<canvas canvas-id="posterCanvas" class="canvas" :style="{width: systemInfo.windowWidth + 'px', height: systemInfo.windowHeight + 'px'}"></canvas>
		<!-- 顶部导航 -->
		<view class="fixHeader flex-y-center" :style="{paddingTop: StatusBar+'px'}">
		  <view class="leftbtn" @click="goBack()">
		    <image :src="$util.img('/image/header_left.png')" mode="widthFix" style="width: 60rpx;"></image>
		  </view>
		</view>
		<view class="tips">
			<view>立即扫码添加【无忧家小程序】</view>
			<image  :src="$util.img(codeimg)" class="ordericon" mode=""></image>
			<view>1000+服务 一键无忧</view>
		</view>
		<view class="footer fixfooter">
		  <view class="btn_com btn_cart" @click="savePoster">保存图片</view>
		  <button class="btn_com btn_buy" open-type="share" >分享好友</button>
		</view>

		

	</view>
</template>

<script>
	export default {
		data() {
			return {
				StatusBar: getApp().globalData.StatusBar,
				codeimg: '',
				systemInfo: uni.getSystemInfoSync()
			}
		},
		onLoad() {
			this.getPoster()
		},
		methods: {
			getPoster() {
				this.$api.sendRequest({
					url: "/api/member/recommendQrcode",
					data: {
						page: '/pages/index/index'
					},
					success: res => {
						if(res.code == 0) {
							this.codeimg = res.data.path;
						}else {
							this.$util.showToast({
								title: res.message
							});
						}
					}
				})
			},
			goBack() {
				// 判断路由是否有上一页，如果有则返回上一页，否则返回到首页
				if (getCurrentPages().length > 1) {
					uni.navigateBack()
				}else {
					this.$util.redirectTo('/pages/index/index')
				}
			},
			savePoster() {
				uni.showLoading({
					title: '生成海报中...'
				});
				
				const that = this;
				const systemInfo = uni.getSystemInfoSync();
				const width = systemInfo.windowWidth;
				const height = systemInfo.windowHeight;
				
				// 确保图片已加载
				uni.getImageInfo({
					src: this.$util.img('image/erqi/poster_bg.png'),
					success: (bgRes) => {
						uni.getImageInfo({
							src: this.$util.img(this.codeimg),
							success: (qrRes) => {
								// 创建离屏canvas
								const canvas = uni.createCanvasContext('posterCanvas', this);
								
								// 绘制背景
								canvas.drawImage(bgRes.path, 0, 0, width, height);
								
								// 绘制二维码和文字
								const tipsY = height * 0.5; // 底部27%位置
								canvas.setFillStyle('#ffffff');
								canvas.setFontSize(14);
								canvas.fillText('立即扫码添加【无忧家小程序】', width/2 - 100, tipsY);
								
								// 绘制圆形二维码
								const qrSize = 140; // 缩小二维码尺寸
								const qrX = width/2 - qrSize/2;
								const qrY = tipsY + 30;


								// 1. 先绘制“1000+服务 一键无忧”--可解决先绘制圆形区域遮挡最后绘制文字的问题
								const text = '1000+服务 一键无忧';
								canvas.save();
								canvas.setFontSize(14);
								// canvas.setFillStyle('#FF0000'); // 先用红色测试可见性
								canvas.setTextAlign('center');
								
								// 计算文字位置 - 确保在canvas范围内
								const textY = qrY + qrSize + 60; // 固定偏移量
								
								// 绘制文字
								canvas.setFillStyle('#ffffff');
								canvas.fillText(text, width/2, textY);
								canvas.restore();
								
								// 2. 再绘制圆形图片（确保 restore() 被调用）
								// 绘制圆形裁剪区域
								canvas.beginPath();
								canvas.arc(qrX + qrSize/2, qrY + qrSize/2, qrSize/2, 0, 2 * Math.PI);
								canvas.closePath();
								canvas.clip();
								
								// 绘制二维码
								canvas.drawImage(qrRes.path, qrX, qrY, qrSize, qrSize);
								
								// 恢复绘制区域
								canvas.restore();
								
								
								// 绘制到canvas
								canvas.draw(false, () => {
									// 生成临时文件路径
									uni.canvasToTempFilePath({
										canvasId: 'posterCanvas',
										success: (res) => {
											uni.hideLoading();
											// 保存图片到相册
											uni.saveImageToPhotosAlbum({
												filePath: res.tempFilePath,
												success: () => {
													uni.showToast({
														title: '保存成功',
														icon: 'success'
													});
												},
												fail: () => {
													uni.showToast({
														title: '保存失败',
														icon: 'none'
													});
												}
											});
										},
										fail: (err) => {
											uni.hideLoading();
											uni.showToast({
												title: '生成海报失败',
												icon: 'none'
											});
										}
									}, this);
								});
							},
							fail: (err) => {
								uni.hideLoading();
								uni.showToast({
									title: '二维码加载失败',
									icon: 'none'
								});
							}
						});
					},
					fail: (err) => {
						uni.hideLoading();
						uni.showToast({
							title: '背景图加载失败',
							icon: 'none'
						});
					}
				});
			
			},
		},
		onShareAppMessage() {
			var path = '/pages/index/index';
			var invite_id = uni.getStorageSync('userInfo').member_id || '';
			path += '?invite_id=' + invite_id;
			return {
				title: '无忧家小程序，1000+服务 一键无忧！',
				imageUrl: "",
				path: path,
				success: res => {
					console.log("转发")
				},
				fail: res => {}
			};
		},
		onShareTimeline() {
			var path = '/pages/index/index';
			var invite_id = uni.getStorageSync('userInfo').member_id || '';
			path += '?invite_id=' + invite_id;
			return {
				title: '无忧家小程序，1000+服务 一键无忧！',
				imageUrl: "",
				path: path,
				success: res => {
					console.log("转发")
				},
				fail: res => {}
			};
		}
	}
</script>

<style lang="scss" scoped>
.container {
    width: 100%;
    height: 100vh;
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat; 
	padding-bottom: 0;
	position: relative;
}
.canvas {
	position: fixed; /* 改为fixed定位 */
	top: 0;
	left: 0;
	z-index: -1; /* 提高层级 */
	pointer-events: none; /* 防止遮挡交互 */
}

.fixHeader {
  position:fixed;
  top:0;
  z-index: 9;
  width: 100%;
  box-sizing: border-box;
  .leftbtn {
    padding-left: 30rpx;
    // padding-top: 10rpx;
	margin-right: 30rpx;
	width: 60rpx;
	height: 60rpx;
  }
}

.tips {
	position: fixed;
	bottom: 27%;
	left: 50%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 392rpx;
	margin-left: -196rpx;
	
	text-align: center;
	line-height: 1.5;
	box-sizing: border-box;
	view {
		color: #fff;
		font-size: 28rpx;
	}
	image {
		width: 240rpx;
		height: 240rpx;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		border-radius: 50%;
		// border: 1px solid red;
	}
}
.footer {
  display: flex;
  justify-content: space-between;
  .btn_com {
    height: 98rpx;
    line-height: 98rpx;
    text-align: center;
    box-sizing: border-box;
    border-radius: 60rpx;
  }
  .btn_cart {
    width: 228rpx;
    color: #0E1426;
    background: #F6F6F6;
  }
  .btn_buy {
    width: 426rpx;
    color: #fff;
    background-color: $color-title2;
  }
}
</style>
